import React, { useEffect, useState } from 'react';
import { Row, Col, Spin, Empty, message } from 'antd';
import { eventTrack } from '@/utils/track';
import LinkTo from '@/components/LinkTo';
import { history } from 'umi';
import { getEntrymanaList } from '@/services/entryManagement/entryManagement';
import authHelpr from '@/utils/auth/helper';
import styles from './EntryList.less';

const { checkCode } = authHelpr;

/**
 * 规则制度
 */

const EntryList = () => {
    const [spinning, setSpinning] = useState(false);
    const [sourceData, setSourceData] = useState([]);
    const user = localStorage.getItem('user') ? JSON.parse(localStorage.getItem('user')) : {};

    useEffect(() => {
        if (!checkCode('office:personnel:progress:entry')) return;
        const init = async () => {
            setSpinning(true);
            const result = await getEntrymanaList({
                companyCode: user.companyId,
                orderByField: 'o.entry_date desc,CONVERT(o.talent_name using gbk)',
                pageNo: 1,
                pageSize: 4
            });
            setSpinning(false);
            if (result && result.code === 10000) {
                setSourceData(result.data.rows);
            }
        };
        init();
    }, []);
    return (
        <Spin spinning={spinning}>
            {sourceData.length === 0 ? (
                <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
            ) : (
                sourceData.map(item => {
                    const linkContent = () => {
                        if (item.offerState === 'offerAccepted' && !checkCode('office:job:offer')) {
                            return (
                                <a
                                    href="#"
                                    onClick={e => {
                                        e.preventDefault();
                                        message.error('暂无权限');
                                    }}
                                    title={item.talentName}
                                    className={styles.title}
                                >
                                    {item.talentName}
                                </a>
                            );
                        }

                        const path =
                            item.offerState === 'offerAccepted'
                                ? '/office/personnelManagement/recruit/offer/detail'
                                : '/office/personnelManagement/onboardAndLeave/entryManagement/addEntry';
                        const innerParams = {
                            offerCode: item.offerCode
                        };
                        return (
                            <LinkTo
                                onClick={async (e, url) => {
                                    // 埋点
                                    await eventTrack({
                                        eventName: 'personal_portal_onboardAndLeave_entry_detail_click',
                                        eventProps: {
                                            label: '个人主页-我的入转调离-入职详情'
                                        }
                                    });
                                    history.push(url);
                                }}
                                to={path}
                                query={innerParams}
                                title={item.talentName}
                                className={styles.title}
                            >
                                {item.talentName}
                            </LinkTo>
                        );
                    };

                    return (
                        <div className={styles.tabPaneItem} key={item.id}>
                            <Row gutter={4}>
                                <Col span={6}>{linkContent()}</Col>
                                <Col span={6}>{item.entryPostName}</Col>
                                <Col span={6}>{item.offerStateName}</Col>
                                <Col span={6} className={styles.lastTab}>
                                    {item.entryDate}
                                </Col>
                            </Row>
                        </div>
                    );
                })
            )}
        </Spin>
    );
};
export default EntryList;
